<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<button type="default" @tap="loginFormMpWeixin">点击一键登录</button>
		<!-- #endif -->
		
		<!-- #ifdef APP -->
		<uni-forms ref="form" :modelValue="user" :rules="rules" validateTrigger="blur">
			<uni-forms-item label="姓名" name="username">
				<uni-easyinput  type="text" v-model="user.username" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="pwd">
				<uni-easyinput  class="input" v-model="user.pwd" type="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForApp">登录</button>
		<button @click="goReg">去注册</button>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef APP
				redirectUrl: "",
				user: {
					username: '',
					pwd: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '用户名必填'
							},
							{
								pattern: /^[a-zA-Z]\w{3,7}$/,
								errorMessage: "4-8位字符组成,首字符必须是字母"
							}
						],
						label:'姓名',
					},
					pwd: {
						rules: [{
								required: true,
								errorMessage: '密码必填'
							},
							{
								pattern: /^[a-zA-Z]\w{3,7}$/,
								errorMessage: "4-8位字符组成,首字符必须是字母"
							}
						],
						label:'密码',
					}
				}
				// #endif
			}
		},
		onLoad(options){
			if (options.redirectUrl) {
				this.redirectUrl = options.redirectUrl;
			}
		},
		methods: {
			// #ifdef MP-WEIXIN
			loginFormMpWeixin(){
				// 微信小程序一键登录
				uni.showModal({
					title: "授权登录",
					content: "申请获取您的微信信息进行登录",
					success: res => {
						if (res.confirm) {
							// 登录
							uni.login({
								success: res => {
									this.$request('/user/wxapp/authorize', {
										method: 'POST',
										data: {
											code: res.code
										}
									}).then(res => {
										if (res.code === 0) {
											uni.setStorageSync('token', res.data.token);
											uni.setStorageSync('openid', res.data.openid);
											uni.setStorageSync('uid', res.data.uid);
											uni.showToast({
												title:"登录成功",
												success: res => {
													this.redirectAction()
												}
											})
										}
									})
								}
							})
						}
					}
				})
			},
			// #endif 
			redirectAction(){
				if (this.redirectUrl) {
					// 判断是否是tab页
					const authTabPage = ['pages/cart/cart', 'pages/user/user'];
					if (authTabPage.includes(this.redirectUrl)) {
						uni.switchTab({
							url:'/' + this.redirectUrl
						})
					} else {
						uni.redirectTo({
							url:'/' + this.redirectUrl
						})
					}
				} else {
					uni.switchTab({
						url:"/pages/home/home"
					})
				}
			},
			// #ifdef APP
			submitForApp() {
				this.$refs.form.validate().then(() => {
					this.$request('/user/username/login', {
						method: 'POST',
						data: {
							...this.user,
							deviceName: 'aaa',
							deviceId: 111
						}
					}).then(res => {
						if (res.code === 0) {
							uni.setStorageSync("token", res.data.token);
							uni.setStorageSync("uid", res.data.uid);
							this.$store.commit("setUserInfo", res.data)
							uni.showToast({
								title: "登录成功",
								success: () => {
									this.redirectAction()
								}
							})
						}
					})
				}).catch(() => {
					uni.showToast({
						title: "表单校验不通过",
						icon: 'error'
					})
				})
			},
			goReg(){
				uni.navigateTo({
					url:"/pages/register/register"
				})
			}
			// #endif
		}
	}
</script>

<style>

</style>